iT邦幫忙

2021 iThome 鐵人賽

DAY 20
1
Modern Web

Vue.js 進階心法系列 第 20

其它的 lifecycle 或 vue router 的 hook

  • 分享至 

  • xImage
  •  

在 About 刷新一次頁面

還有一些用在我也不太常用的 lifecycle 這次就一起 Demo 一下順序

兩個 component 切換

從 About 切到 Home

隱葳的 lifecycle

keep-alive: activated/deactivated

這是一個原本用在 dynamic component 的 lifecycle,為了在常切換 component 的情境之下,不要重複的銷毀又重新建立 component。

keep-alive, API — Vue.js

因為有它保持讓 component 一直存在,所以,不再觸發 created 和 destoryed 那麼在上面的初始與釋放資源的行為怎麼辦?就不會有任何機會再觸發了?

<keep-alive>
  <component :is="view"></component>
</keep-alive>

在我的例子上,要將 keep-alive 加在 router-view 上面

router-view, API Reference | Vue Router

<keep-alive>
  <router-view />
</keep-alive>

加上兩個 life cycle

{
  // ...
  destroyed() {
    console.warn('[component About] destroyed', this.user)
  },
  activated() {
    console.warn('[component About] activated', this.user)
  },
  deactivated() {
    console.warn('[component About] deactivated', this.user)
  }
}

刷新頁面,進入 Home

切換到 About

切回 Home

可以發現 About 的 beforeRouteLeave 之後就看不到 Home 的 lifecycle 了。

created、mounted 和 destoryed 都沒有出現了

切回 About

等到渲染完畢,才執行的 $nextTick

vm.$nextTick( [callback] ), API — Vue.js

用「等 DOM 更新好之後,再執行的時候」通常在這個時候如果有一些 jQuery 套件會需要執行 document.querySelector 就要在這個時候執行。

通常會在 mounted 時才註冊 nextTick 的 callback

export default {
  // ...
  mounted() {
    this.$nextTick(function () {
      // DOM is now updated
      // `this` is bound to the current instance
      this.doSomething()
    }
  }
}

通常會因為簡單的 DOM 結構渲染速度很快,加上非同步的關係,所以很少使用這個 hook。


上一篇
載入頁面,什麼時候發 API 適合?
下一篇
表單攻略前準備
系列文
Vue.js 進階心法30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言